<template>
  <div class="input-container">
    <div class="input-wrapper">
      <textarea
        ref="textareaRef"
        v-model="inputMessage"
        @keydown="handleKeyDown"
        @input="adjustHeight"
        placeholder="输入消息..."
        class="message-input"
        :disabled="isLoading"
        rows="1"
        style="height: 32px; line-height: 32px; padding: 0;"
      ></textarea>
      <button
        @click="handleSend"
        :disabled="isLoading || !inputMessage.trim()"
        class="send-button"
      >
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
          <path
            d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"
            fill="currentColor"
          />
        </svg>
      </button>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  isLoading: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(['send-message']);

const inputMessage = ref('');
const textareaRef = ref(null);

const handleKeyDown = (event) => {
  // Enter发送消息，Shift+Enter换行
  if (event.key === 'Enter' && !event.shiftKey) {
    event.preventDefault();
    handleSend();
  }
};

const handleSend = () => {
  if (!inputMessage.value.trim() || props.isLoading) return;
  
  const message = inputMessage.value.trim();
  inputMessage.value = '';
  
  // 重置高度
  nextTick(() => {
    adjustHeight();
  });
  
  emit('send-message', message);
};

const adjustHeight = () => {
  if (!textareaRef.value) return;
  
  const textarea = textareaRef.value;
  // 重置高度以获取正确的scrollHeight
  textarea.style.height = 'auto';
  
  // 计算新高度，限制最大高度
  const scrollHeight = textarea.scrollHeight;
  const maxHeight = 120; // 最大高度约5行
  const newHeight = Math.min(scrollHeight, maxHeight);
  
  textarea.style.height = newHeight + 'px';
};

// 监听输入变化，自动调整高度
watch(inputMessage, () => {
  nextTick(() => {
    adjustHeight();
  });
});

// 组件挂载后调整高度
onMounted(() => {
  adjustHeight();
});

// 暴露方法给父组件
defineExpose({
  clearInput: () => {
    inputMessage.value = '';
    nextTick(() => {
      adjustHeight();
    });
  },
  setInput: (value) => {
    inputMessage.value = value;
    nextTick(() => {
      adjustHeight();
    });
  }
});
</script>

<style scoped>
.input-container {
  box-sizing: border-box;
  padding: 12px 16px;
  background-color: #ffffff;
  border-top: 1px solid #e5e5ea;
}

.input-wrapper {
  display: flex;
  align-items: flex-end;
  background-color: #f2f2f7;
  border-radius: 20px;
  padding: 8px 12px;
  min-height: 32px;
}

.message-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 16px;
  outline: none;
  color: #1c1c1e;
  padding: 8px 0;
  resize: none;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.4;
  min-height: 22px;
  max-height: 120px;
  overflow-y: auto;
}

.message-input::placeholder {
  color: #8e8e93;
}

.message-input::-webkit-scrollbar {
  width: 4px;
}

.message-input::-webkit-scrollbar-track {
  background: transparent;
}

.message-input::-webkit-scrollbar-thumb {
  background: #c7c7cc;
  border-radius: 2px;
}

.message-input::-webkit-scrollbar-thumb:hover {
  background: #8e8e93;
}

.send-button {
  background: #007aff;
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  cursor: pointer;
  transition: background-color 0.2s;
  margin-left: 8px;
  flex-shrink: 0;
}

.send-button:hover:not(:disabled) {
  background: #0056b3;
}

.send-button:disabled {
  background: #c7c7cc;
  cursor: not-allowed;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .input-container {
    padding: 10px 12px;
  }
}
</style> 